<template>
  <div>
    <el-table
        :data="tableData" max-height="400"
        style="width: 100%" v-if="state.display == 'list'">
      <el-table-column
          prop="title"
          label="标题"
          >
      </el-table-column>
      <el-table-column label="状态" prop="read" width="100">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.read === '已读' ? 'primary' : 'info'"
              disable-transitions>{{scope.row.read}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="createBy"
          label="创建者"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          width="180"
          label="创建时间">
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="s">
          <el-button type="warning" size="mini" @click="state.display='info',noticeInfo=s.row,get(s.row.id)">
            <i class="el-icon-view el-icon--left"></i>查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="state.display == 'info'">
      <h3>{{noticeInfo.title}}</h3>
      <div v-html="noticeInfo.html"></div>
    </div>
    <div style="display: flex; justify-content: center;">
      <el-button plain v-if="state.display == 'info'" @click="state.display='list'">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "notice-dialog",
  props:['info','display'],
  data() {
    return{
      tableData:[],
      noticeInfo:"",
      state:{
        display:this.display
      }
    }
  },
  methods:{
    get(id){
      // 查找具有给定 id 的对象的索引
      let targetIndex = this.tableData.findIndex(item => item.id === id);
      // 如果找到了目标对象，则修改其 read 属性为 已读
      if (targetIndex !== -1) {
        this.tableData[targetIndex].read = '已读';
      }

      let params={id:id}
      this.request('/api/notice/read',params).then(res=>{
        if(!res){return}
        this.$bus.$emit("queryNoReadNotice")
      })
    }
  },
  mounted() {
    console.log(this.info)
    if(this.state.display=='list'){
      this.tableData=this.info
    }
  }
}
</script>

<style scoped>

</style>